<template>
  <div
    id="content"
    class="app-content ng-scope"
    :style="{height:screenHeight+'px'}"
  >
  
      <router-view></router-view>
  </div>

</template>
<script>
import 'ol/ol.css';
import { mapActions } from 'vuex';
import * as mapOper from '../../scripts/mapOper.js';
export default {
  name: 'main_content',
  data() {
    return {
      screenHeight:window.innerHeight-100,
    };
  },
  
  mounted() {
    const that = this;
    window.onresize =()  =>{
      return (()=>{
        window.screenHeight = window.innerHeight;
        this.screenHeight = window.screenHeight-100;
        this.changeContentHeight({ contentHeight: this.screenHeight });
      })();
    };
    this.changeContentHeight({ contentHeight: this.screenHeight });
    let map = mapOper.initMap('content');
    that.changeMap({ map: map });
  },
  
  methods: {
    ...mapActions(['changeMap','changeContentHeight'])
  }
};
</script>

